« Previous Next »

JavaScript Rest and Spread Operators

Rest Operator Example

              <!DOCTYPE html>
              <html lang="en">
              <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              </head>
              <body>
                    <div id="restOutput"></div>
                      <Script>
                           function sum(...numbers) {
                                                        return numbers.reduce((acc, number) => acc + number, 0);
                                                    }
                                                    document.getElementById("restOutput").innerText = sum(1, 2, 3, 4, 5);
                     </Script>
              </body>
              </html>
Output:

Spread Operator Example

              <!DOCTYPE html>
              <html lang="en">
              <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              </head>
              <body>
                    <div id="spreadOutput"></div>
                      <Script>
                                const numbers = [1, 2, 3, 4, 5];
                                const newNumbers = [...numbers, 6, 7, 8];
                                document.getElementById("spreadOutput").innerText = newNumbers.join(", ");
                     </Script>
              </body>
              </html>
Output:

Array Spreading Example

              <!DOCTYPE html>
              <html lang="en">
              <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              </head>
              <body>
                    <div id="arraySpreadOutput"></div>
                      <Script>
                            const array1 = [1, 2, 3];
                            const array2 = [...array1, 4, 5, 6];
                            document.getElementById("arraySpreadOutput").innerText = array2.join(", ");
                     </Script>
              </body>
              </html>
Output:

Object Spreading Example

              <!DOCTYPE html>
              <html lang="en">
              <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              </head>
              <body>
                    <div id="objectSpreadOutput"></div>
                      <Script>
                            const obj1 = { a: 1, b: 2 };
                            const obj2 = { ...obj1, c: 3, d: 4 };
                            document.getElementById("objectSpreadOutput").innerText = JSON.stringify(obj2);
                     </Script>
              </body>
              </html>
Output:

Function Arguments (Rest Operator) Example

              <!DOCTYPE html>
              <html lang="en">
              <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              </head>
              <body>
                    <div id="functionArgsOutput"></div>
                      <Script>
                            function multiply(...numbers) {
                                                            return numbers.reduce((acc, num) => acc * num, 1);
                                                          }
                            document.getElementById("functionArgsOutput").innerText = multiply(2, 3, 4);
                     </Script>
              </body>
              </html>
Output:

Clone Array Example

              <!DOCTYPE html>
              <html lang="en">
              <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              </head>
              <body>
                    <div id="cloneArrayOutput"></div>
                      <Script>
                        const originalArray = [10, 20, 30];
                        const clonedArray = [...originalArray];
                        document.getElementById("cloneArrayOutput").innerText = clonedArray.join(", ");
                     </Script>
              </body>
              </html>
Output:

Array Destructuring Example

              <!DOCTYPE html>
              <html lang="en">
              <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              </head>
              <body>
                    <div id="arrayDestructuringOutput"></div>
                      <Script>
                            const colors = ["red", "green", "blue"];
                            const [firstColor, secondColor, thirdColor] = colors;
                            document.getElementById("arrayDestructuringOutput").innerText = 
                                `First: ${firstColor}, Second: ${secondColor}, Third: ${thirdColor}`;
                     </Script>
              </body>
              </html>
Output:

Object Destructuring Example

              <!DOCTYPE html>
              <html lang="en">
              <head>
              <meta charset="UTF-8">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              </head>
              <body>
                    <div id="objectDestructuringOutput"></div>
                      <Script>
                                const person = { name: "Anam", age:23, city: "Aurangabad" };
                                const { name, age, city } = person;
                                document.getElementById("objectDestructuringOutput").innerText = 
                                    `Name: ${name}, Age: ${age}, City: ${city}`;
                     </Script>
              </body>
              </html>
Output:

« Previous Next »